<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('参与角色详情')" />
	<link th:href="@{/css/common.css}" rel="stylesheet"/>
	<link th:href="@{/css/detail.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
	<div class="content">
		<input th:field="*{participateRole.id}" id="id" type="hidden">
		<div class="content-box">
			<div class="info-head">
				<p class="pull-left">
					<span th:text="${participateRole.roleName}"></span>
				</p>
			</div>

			<div class="table-info">
				<ul class="list-group">
					<li class="list-group-item">
						<span>参与画像</span>
						<span th:text="${participateRole.participatePhoto}"></span>
					</li>
					<li class="list-group-item">
						<span>角色类型</span>
						<span th:text="${participateRole.roleType}"></span>
					</li>
					<li class="list-group-item"></li>
					<li class="list-group-item">
						<span>创建人</span>
						<span th:text="${participateRole.createBy}">王树立</span>
					</li>
					<li class="list-group-item">
						<span>创建时间</span>
						<span th:text="${#dates.format(participateRole.createTime, 'yyyy-MM-dd HH:mm:ss')}">2021.11.21 13:21</span>
					</li>
					<li class="list-group-item"></li>
					<li class="list-group-item">
						<span>更新人</span>
						<span th:text="${participateRole.updateBy}">王树立</span>
					</li>
					<li class="list-group-item">
						<span>更新时间</span>
						<span th:text="${#dates.format(participateRole.updateTime, 'yyyy-MM-dd HH:mm:ss')}">2021.11.21 13:21</span>
					</li>
				</ul>
			</div>
			<ul class="nav nav-tabs navtabs contentTab" role="tablist">
				<li class="active"><a href="#content-business" role="tab" data-action = "relationUsageList" data-toggle="tab">关联用况</a></li>
			</ul>
			<div class="tab-content">
				<div role="tabpanel" class="tab-pane active mt20 " id="content-usage"></div>
			</div>
		</div>
	</div>
</div>
</div>
</div>
</body>
<th:block th:include="include :: footer"/>

<!--关联用况模板-->
<script id="contentUsageTpl" type="text/template">
	<ul class="list-group">
		{{# layui.each(d, function(index, a){ }}
		<li class="list-group-item">
			<div class="list-tit">
				<p>
					<span>{{# if(a.fbType=='1') { }} 前台 {{#} else { }}后台{{#}}}</span>
					<span>{{# if(a.usageType=='1') { }} 增 {{# } else if(a.usageType == '2') { }} 删 {{# } else if(a.usageType == '3') { }} 改 {{#} else { }}查{{#}}}</span>
					<span>{{a.usageyName || '一'}}</span>
					<a class="pull-right" style = "cursor: pointer;" onclick="usageDetail({{a.id}})">查看详情</a>
				</p>
				<p>
					<span>用况架构</span>
					<span>
							{{# if(a.clientType=='1') { }} PCweb {{# } else if(a.clientType == '2') { }} H5 {{# } else if(a.clientType == '3') { }} APP {{#} else { }} 微信小程序 {{#}}}
							· {{# if(a.isAlone=='1') { }} 单模块 {{#} else { }} 非单模块 {{# }}}
							· {{# if(a.versionType=='1') { }} 新功能 {{# } else if(a.versionType == '2') { }} 优化 {{#} else { }} 废弃 {{#}}}
						</span>
				</p>
			</div>
			<div class="list-content">
				<p>用况故事</p>
				<p>{{a.usageStory || '一'}}</p>
			</div>
			<div class="list-content">
				<p>价值描述</p>
				<p>{{a.valueDescription || '一'}}</p>
			</div>
			<div class="list-content">
				<p>业务实现逻辑</p>
				<p>{{a.businessImplDescription || '一'}}</p>
			</div>
			<div class="list-content">
				<p>优化或废弃说明</p>
				<p>{{a.versionDescription || '一'}}</p>
			</div>
		</li>
		{{# }); }}
	</ul>
</script>

<script th:inline="javascript">
    // 接口uri
    const prefix = ctx + "role/role";
    $(function () {
		// 默认加载
		relationUsageList();
	});

    $("body").on('click','.del',function(){
        $(this).parents(".list-group-item").remove();
    });

    /**标签切换事件*/
    $(".contentTab a").click(function (e) {
        var action = $(this).data("action");
        if(action) {
			window[action]();
		}
    });

	/**
	 * 关联用况函数
	 */
	function relationUsageList() {
		var params = {};
		params.businessId = $("input[name='id']").val();
		var resultJson;
		var config = {
			url: prefix + "/usageList",
			type: "POST",
			dataType: "json",
			async: false,
			data: params,
			success: function (result) {
				if (result && result.code == 0) {
					resultJson = result.data;
				}
			}
		};
		$.ajax(config);
		if(!resultJson) {
			return false;
		}
		var contentUsageTplHtml = $("#contentUsageTpl").html();
		laytpl(contentUsageTplHtml).render(resultJson, function (html) {
			$("#content-usage").empty();
			$("#content-usage").append(html);
		});
	};

	function usageDetail(id) {
		$.operate.addTab2("用况详情", ctx + "usage/usage/detail/" + id);
	}

</script>
</html>
